<template>
    <div class="app-container">
        <div class="filter-head">
            <div class="filter-item" style="margin-right: auto;">
                <el-button icon="el-icon-plus" :loading="listLoading" type="success"
                    @click="addHandler">新增关联</el-button>
            </div>
            <div class="filter-item">
                <el-select v-model="listQuery.city_id" placeholder="请选择城市" filterable clearable>
                    <el-option :label="item.label" :value="item.value" v-for="item, index in cityList" :key="index" />
                </el-select>
            </div>
            <div class="filter-item">
                <el-input v-model="listQuery.hotel_id" placeholder="请输入子酒店ID" clearable />
            </div>
            <div class="filter-item">
                <el-input v-model="listQuery.hotel_name" placeholder="请输入子酒店名称" clearable />
            </div>

            <div class="filter-item">
                <el-button icon="el-icon-search" :loading="listLoading" type="primary"
                    @click="handleFilter">搜索</el-button>
            </div>
        </div>

        <div class="table">
            <el-table :data="tableData" border style="width: 100%" v-loading="listLoading">
                <el-table-column type="index" width="50" align="center" label="序号">
                </el-table-column>

                <el-table-column prop="city_name" width="100" label="城市" align="center">
                </el-table-column>

                <el-table-column prop="hotel_id" width="160" label="子酒店ID" align="center">
                </el-table-column>

                <el-table-column prop="hotel_name" min-width="180" label="子酒店名称" align="center">
                </el-table-column>

                <el-table-column prop="inn_name" min-width="180" label="锦江酒店名称" align="center">
                    <template slot-scope="scope">
                        <div>
                            {{ scope.row.hotel.inn_name }}
                        </div>
                    </template>
                </el-table-column>

                <el-table-column prop="address" min-width="180" label="酒店地址" align="center">
                    <template slot-scope="scope">
                        <div>
                            {{ scope.row.hotel.address }}
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="is_special_sales" label="是否特殊售卖" align="center">
                    <template slot-scope="scope">
                        <el-tag type="info" v-if="scope.row.is_special_sales == 0">否</el-tag>
                        <el-tag type="success" v-else-if="scope.row.is_special_sales == 1">是</el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="price_system" label="价格体系" align="center">
                    <template slot-scope="scope">
                        <div v-if="scope.row.price_system">
                            <el-tag type="info" v-if="scope.row.price_system == 1">全渠道</el-tag>
                            <el-tag type="info" v-else-if="scope.row.price_system == 2">甲渠道</el-tag>
                        </div>
                        <div v-else>暂无</div>
                    </template>
                </el-table-column>
                <el-table-column prop="room_price_source" label="房价来源" align="center">
                    <template slot-scope="scope">
                        <div v-if="scope.row.room_price_source">
                            <el-tag type="info" v-if="scope.row.room_price_source == 1">自动获取</el-tag>
                            <el-tag type="info" v-else-if="scope.row.room_price_source == 2">手动设置</el-tag>
                        </div>
                        <div v-else>暂无</div>
                    </template>
                </el-table-column>
                <el-table-column prop="channel_price_ratio" label="渠道价比率(%)" align="center">
                    <template slot-scope="scope">
                        <div v-if="scope.row.channel_price_ratio">
                            {{ scope.row.channel_price_ratio }}%
                        </div>
                        <div v-else>暂无</div>
                    </template>
                </el-table-column>
                <el-table-column prop="room_quantity_source" label="保留房来源" align="center">
                    <template slot-scope="scope">
                        <div v-if="scope.row.room_quantity_source">
                            <el-tag type="info" v-if="scope.row.room_quantity_source == 1">自动获取</el-tag>
                            <el-tag type="info" v-else-if="scope.row.room_quantity_source == 2">不设置</el-tag>
                        </div>
                        <div v-else>暂无</div>
                    </template>
                </el-table-column>
                <el-table-column label="操作" min-width="230" align="center" fixed="right">
                    <div slot-scope="scope">
                        <el-button style="margin: 3px;" size="mini"
                            @click="jumpHouseTypeHandle(scope.row)">查看母物理房型</el-button>
                        <el-button style="margin: 3px;" size="mini" type="danger"
                            @click="deleteHandle(scope.row)">删除</el-button>
                        <el-button style="margin: 3px;" size="mini" type="danger" v-if="scope.row.is_special_sales == 1"
                            @click="cancelSpecialSale(scope.row)">取消特殊售卖</el-button>
                        <el-button style="margin: 3px;" size="mini" type="primary"
                            v-if="scope.row.is_special_sales == 1" @click="setSpecialSale(scope.row)">修改特殊售卖</el-button>
                        <el-button style="margin: 3px;" size="mini" type="primary"
                            v-if="scope.row.is_special_sales == 0" @click="setSpecialSale(scope.row)">设置特殊售卖</el-button>
                        <el-button style="margin: 3px;" size="mini" type="primary"
                            @click="QuantitySource(scope.row)">设置保留房来源</el-button>
                        <el-button style="margin: 3px;" size="mini" type="primary"
                            @click="Addsubromm(scope.row)">新增子物理房型</el-button>
                    </div>
                </el-table-column>
            </el-table>
            <div class="pagination-container">
                <el-pagination :current-page="listQuery.page" :page-sizes="[10, 20, 30, 50]"
                    :page-size="listQuery.limit" :total="total" background
                    layout="total, sizes, prev, pager, next, jumper" @size-change="handleSizeChange"
                    @current-change="handleCurrentChange" />
            </div>
        </div>

        <add-relevancy v-if="addRelevancyVisible" :show.sync="addRelevancyVisible" :cityList="cityList"
            :currentObj="currentObj" :type="activeType" @update="getList" />
        <SetSpecialSaleref v-if="SetSpecialSaleVisible" :show.sync="SetSpecialSaleVisible" @update="setSpecialSaledata"
            :authData="authData">
        </SetSpecialSaleref>
        <SetQuantitySource v-if="SetQuantitySourceVisible" :show.sync="SetQuantitySourceVisible"
            @update="setQuantitySourcedata" :authData="authData">
        </SetQuantitySource>
        <SetAddsubrommVue v-if="SetAddsubrommVisible" :show.sync="SetAddsubrommVisible" @update="setAddsubrommdata"
            :authData="authData">
        </SetAddsubrommVue>
    </div>
</template>

<script>

import { getAllCityList, setRoomQuantitySource, getSubsidiaryHotelList, subHotelDelete, setSpecialSales, cancelSpecialSales, setsubBasicRoomTypeSave } from '@/api/hotel'
import AddRelevancy from './components/addRelevancy.vue'
import SetSpecialSaleref from './components/setSpecialSaleref.vue'
import SetQuantitySource from './components/setQuantitySource.vue'
import SetAddsubrommVue from './components/setAddsubromm.vue'
export default {
    data() {
        return {
            listQuery: {
                page: 1,
                limit: 10,
                city_id: '',
                hotel_id: '',
                hotel_name: ''
            },
            total: 0,
            tableData: [],
            cityList: [],
            activeType: 'add',
            listLoading: false,
            addRelevancyVisible: false,
            SetSpecialSaleVisible: false,
            SetQuantitySourceVisible: false,
            SetAddsubrommVisible: false,
            currentObj: {},
            authData: null
        };
    },
    async mounted() {
        await this.getCityList();
        await this.getList();
    },
    methods: {
        setSpecialSale(value) {
            this.authData = value;
            this.SetSpecialSaleVisible = true;
        },
        QuantitySource(value) {
            this.authData = value;
            this.SetQuantitySourceVisible = true;
        },
        Addsubromm(value) {
            this.authData = value;
            this.SetAddsubrommVisible = true;
        },
        async setQuantitySourcedata(params) {
            this.listLoading = true
            let res = await setRoomQuantitySource({ ...params });
            this.listLoading = false
            if (res.code === 0) {
                this.$message({
                    type: 'success',
                    message: '修改成功!'
                });
                await this.getList();
            }
        },
        async setAddsubrommdata(res) {
            this.listLoading = true
            console.log(res);
            try {
                this.listLoading = false
                if (res.code === 0) {
                    this.$message({
                        type: 'success',
                        message: '操作成功!'
                    });
                    await this.getList();
                }
            } catch (error) {
                this.listLoading = false
            }

        },
        async setSpecialSaledata(params) {
            this.listLoading = true
            let res = await setSpecialSales({ ...params });
            this.listLoading = false
            if (res.code === 0) {
                this.$message({
                    type: 'success',
                    message: '修改成功!'
                });
                await this.getList();
            }
        },
        cancelSpecialSale(val) {
            this.$confirm('是否取消?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(async () => {
                this.listLoading = true
                let res = await cancelSpecialSales({ id: val.id });
                this.listLoading = false
                if (res.code === 0) {
                    this.$message({
                        type: 'success',
                        message: '取消特殊售卖成功'
                    });
                    await this.getList();
                }
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消'
                });
            });
        },
        jumpHouseTypeHandle(val) {
            // return this.$router.push({
            //     path: "/motherHouseType",
            //     name: "MotherHouseType",
            //     query: { hotel_id: val.hotel_id }
            // });
            this.$router.push(`/motherHouseType?hotel_id=${val.hotel_id}`)
        },
        deleteHandle(val) {
            console.log(val);
            this.$confirm('是否删除?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(async () => {
                this.listLoading = true
                let res = await subHotelDelete({ id: val.id });
                this.listLoading = false
                if (res.code === 0) {
                    this.$message({
                        type: 'success',
                        message: '删除成功'
                    });
                    await this.getList();
                }
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消'
                });
            });
        },
        async getList() {
            console.log('this.listQuery', this.listQuery)
            this.listLoading = true
            let res = await getSubsidiaryHotelList(this.listQuery)
            if (res.code === 0) {
                this.tableData = res.data.items
                this.total = res.data.total
            }
            this.listLoading = false
        },
        async getCityList() {
            this.listLoading = true
            let res = await getAllCityList()
            if (res.code === 0) {
                this.cityList = res.data.map((item, index) => {
                    return { label: item.city_name, value: item.city_id };
                });
                console.log("🚀 ~ getCityList ~ this.listQuery.city :", this.listQuery.city)

            }
        },
        addHandler() {
            this.updateActiveType('add')
            this.addRelevancyVisible = true;
        },
        editHandle(val) {
            this.updateActiveType('edit')
            this.addRelevancyVisible = true;
            this.currentObj = val
        },
        updateActiveType(val) {
            this.activeType = val;
        },
        handleFilter() {
            console.log(this.listQuery)
            this.listQuery.page = 1
            this.getList()
        },
        handleSizeChange(val) {
            this.listQuery.limit = val;
            this.getList();
        },
        handleCurrentChange(val) {
            this.listQuery.page = val;
            this.getList();
        }
    },
    components: {
        AddRelevancy,
        SetSpecialSaleref,
        SetQuantitySource,
        SetAddsubrommVue
    }
};
</script>
<style lang="scss" scoped>
.filter-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;

    &>.filter-item {
        margin: 5px;
    }
}

.table {
    margin-top: 10px;
}
</style>
